<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>校验记录</title>
    <%--引入vue的js--%>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <%--引入element的js--%>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/js/axios.min.js"></script>
    <%--引入elementui的样式--%>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>

<div id="app">

    <!------审核信息表-------->
    <el-table
            :data="verifyData"
            border
            style="width: 100%">
        <el-table-column
                prop="id"
                width="120px"
                label="校验编号"
        >
        </el-table-column>
        <el-table-column
                width="80px"
                prop="staff.staffname"
                label="校验员"
        >
        </el-table-column>
        <el-table-column
                width="200px"
                prop="verifydate"
                label="校验时间"
        >
        </el-table-column>

        <el-table-column
                width="120px"
                prop="status"
                label="申请状态"
        >
            <template slot-scope="scope">
                <el-tag
                        type="success"
                        v-if="scope.row.status===1"
                        effect="dark">
                    审核通过
                </el-tag>
                <el-tag
                        type="info"
                        v-else-if="scope.row.status===0"
                        effect="dark">
                    未审核
                </el-tag>
                    <el-tag
                            v-else
                            type="danger"
                            effect="dark">
                        驳回
                    </el-tag>



            </template>
        </el-table-column>

        <el-table-column
                width="80px"
                prop="auditor.staffname"
                label="审核员"
        >
        </el-table-column>


        <el-table-column
                width="200px"
                prop="auditTime"
                label="审核时间"
        >
        </el-table-column>

        <el-table-column
                label="操作">
            <template slot-scope="scope">
                <el-button type="primary"  @click="detailDialog(scope.row)">详细信息</el-button>
                <el-popover
                        v-if="scope.row.status===2"
                        placement="top-start"
                        title="驳回理由"
                        width="80"
                        trigger="hover"
                        :content="scope.row.rejection">
                    <el-button type="danger" slot="reference">查看驳回理由</el-button>
                </el-popover>
            </template>
        </el-table-column>


    </el-table>


    <!------详细信息对话框------->
    <el-dialog
            title="详细信息"
            :visible.sync="dialogVisible"
            width="70%"
    >
        <el-table
                :cell-style="{'text-align':'center'}"
                :header-cell-style="{'text-align':'center'}"
                :data="detailTable"
                border
                style="width: 100%">
            <el-table-column
                    prop="bookId"
                    label="图书编号"
                    width="120"
                    fixed="left">
            </el-table-column>

            <el-table-column
                    prop="bookIco"
                    label="图书图片"
                    width="120">
                <template slot-scope="scope">
                    <img style="width: 140px;height: 70px" :src="scope.row.bookIco">
                </template>
            </el-table-column>


            <el-table-column
                    prop="bookName"
                    label="图书名"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="bookAuthor"
                    label="作者"
                    width="120">
            </el-table-column>

            <el-table-column
                    prop="bookPrice"
                    label="图书价格"
                    width="120">
            </el-table-column>

            <el-table-column
                    prop="bookCount"
                    label="图书数量"
                    width="120">
            </el-table-column>


            <el-table-column
                    prop="booktype.booktypes"
                    label="图书类型"
                    width="120">
            </el-table-column>

            <el-table-column
                    prop="verifyCount"
                    label="校验数量"
                    width="120"

            >
            </el-table-column>

            <el-table-column
                    prop="damageCount"
                    label="报损数量"
                    width="120"
            >

            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange2"
                @current-change="handleCurrentChange2"
                :current-page="current2"
                :page-sizes="[5, 10, 20, 30]"
                :page-size="pageSize2"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total2">
        </el-pagination>
    </el-dialog>



    <!--分页-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>
<script>
    let app=new Vue({
        el: "#app",
        data: {
            current:1,
            pageSize:5,
            total:0,
            current2:1,
            pageSize2:5,
            total2:0,
            verifyData:[],
            dialogVisible:false,
            detailTable:[]

        },
        created() {
                this.loadInfo()
        },
        methods: {

            loadInfo(){
                axios.post("/verifyApplication/selectAllInfo/"+this.current+"/"+this.pageSize).then(res=>{
                    console.log(res)
                    this.verifyData=res.data.data.list
                    this.total=res.data.data.total
                })
            },

            //页面显示数据条数改变重新渲染数据
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadBook();
            },
            //页码改变重新渲染数据
            handleCurrentChange(val) {
                this.current = val;
                this.loadBook();

            },

            handleSizeChange2(val) {
                this.pageSize = val;
                this.loadPurchaseInfo();
            },
            handleCurrentChange2(val) {
                this.current2 = val;
                this.loadPurchaseInfo();
            },

            //显示详细信息窗口
            detailDialog(row){
                this.dialogVisible=true
                axios.post("/verifyBook/selectByVerifyApplicationId/"+this.current+"/"+this.pageSize+"/"+row.id).then(res=>{
                    if(res.data.code===200){
                        this.detailTable=res.data.data.list
                        this.total2=res.data.data.total
                    }
                })



            },
        }




    })
</script>

</body>
</html>
